<template>
  <view style="box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 15px">
    <image style="width: 360rpx" src="/static/images/logo2.svg" mode="scaleToFill"></image>
    <button
      v-if="isAgree"
      :loading="loading"
      :disabled="loading"
      :style="{ background: defThemeColor.primary }"
      class="login-button"
      @click="getLoginCode(true)"
    >
      一键登录
    </button>
    <!-- 如果没有同意隐私政策 -->
    <button
      v-else-if="!isAgree"
      class="login-button"
      :style="{ background: defThemeColor.primary }"
      @click="mxpToastRef?.showError('请阅读并同意《隐私政策》')"
    >
      一键登录
    </button>
    <view style="display: flex; flex-direction: row; align-items: center; margin-top: 20px">
      <mxp-radio v-model:checked="isAgree" labelSize="14px" label="我已阅读并同意" iconSize="18px"></mxp-radio>
      <text style="font-size: 14px; line-height: 14px; color: #8e4c00" @click="openPrivacyAgreementClick">《隐私政策》</text>
    </view>
    <mxp-toast ref="mxpToastRef" :customNav="true"></mxp-toast>
  </view>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import MxpRadio from '@/mxp-ui/mxp-radio/mxp-radio.vue';
  import MxpToast from '@/mxp-ui/mxp-toast/mxp-toast.vue';
  import { useAppStore } from '@/pinia/app';
  import { mpLoginRegisterAxios } from '@/api/account';
  import { mpLogin } from '@/utils/mp';
  import { setLoginInfo } from '../util';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';

  const mxpToastRef = ref<InstanceType<typeof MxpToast> | null>(null);
  const appStore = useAppStore();
  /** 是否同意协议 */
  const isAgree = ref(false);

  /** 拿到登录的 code */
  async function getLoginCode(isToast = true) {
    try {
      appStore.setIsLoginLoging(true);
      const res = await mpLogin();
      await mpPhoneLogin(res.code);
      appStore.setIsLoginLoging(false);
    } catch (error) {
      appStore.setIsLoginLoging(false);
      isToast && mxpToastRef.value?.showError('登录失败,BD0002');
    }
  }

  const loading = computed(() => appStore.isLoginLoading);

  /** 小程序手机号登录或者注册 */
  async function mpPhoneLogin(code: string): Promise<boolean> {
    try {
      appStore.setIsLoginLoging(true);
      const res = await mpLoginRegisterAxios({
        code,
        channelId: appStore.launchQuery.channelId || undefined,
        referralLinkId: appStore.launchQuery.referralLinkId || undefined,
        clickid: appStore.launchQuery.clickid || undefined,
        projectId: appStore.launchQuery.projectid || undefined,
        promotionId: appStore.launchQuery.promotionid || undefined,
        wxFinderId: appStore.launchQuery.wxFinderId || undefined,
        launchQuery: JSON.stringify(appStore.launchQuery || {}),
        iaaFlag: appStore.launchQuery.iaaFlag || 0,
        launchQueryPramas: appStore.launchQuery || {},
      });
      // 设置token，获取用户信息和基础信息
      await setLoginInfo(res.data);
      appStore.setIsLoginLoging(false);

      return Promise.resolve(true);
    } catch (error) {
      console.error('error====', error);
      appStore.setIsLoginLoging(false);
      mxpToastRef.value?.showError('登录失败,BD0003');
      return Promise.reject(error);
    }
  }

  /** 打开隐私政策 */
  function openPrivacyAgreementClick() {
    uni.navigateTo({
      url: '/pages/account/privacy-agreement/privacy-agreement',
    });
  }
</script>

<style scoped lang="scss">
  .logo-view {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .service-view {
    position: fixed;
    bottom: 40px;
    left: 0;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 690rpx;
    margin-top: 10px;
  }

  .login-button {
    width: 100%;
    margin-top: 20px;
    color: #ffffff;
    background: #223aec;

    &:after {
      border: none;
      border-color: transparent;
    }
  }
</style>
